<!-- 党校书架 -->
<template>
    <div class="container">
        <div class="book_collection d-flex flex-column align-items-start" v-for="booktab in book_tabs" :key="booktab.id">
            <div class="book_header">{{ booktab.name }}</div>
            <div class="book_list">
                <img class="book" v-for="book in booktab.list" :key="book.bookId" :src="book.bookCover" alt="">
            </div>
            <el-pagination class="pagination" background layout="prev, pager, next" :page-size="10" :total="booktab.total"
                prev-text="上一页" next-text="下一页" @current-change="onPaginationSizeChange"
                @prev-click="onPaginationSizeChange" @next-click="onPaginationSizeChange">
            </el-pagination>
        </div>
        <footers></footers>
    </div>
</template>

<script>
import Footers from '@/layout/components/Footer.vue'
export default {
    components: {
        Footers
    },
    data() {
        return {
            book_tabs: [{
                id: 1,
                list: [{
                    bookName: '',
                    bookCover: 'https://nwzimg.wezhan.cn/contents/sitefiles2059/10298623/images/44155149.png',
                    bookId: 2
                }, {
                    bookName: '',
                    bookCover: 'https://nwzimg.wezhan.cn/contents/sitefiles2059/10298623/images/44153601.jpg',
                    bookId: 3
                }, {
                    bookName: '',
                    bookCover: 'https://nwzimg.wezhan.cn/contents/sitefiles2059/10298623/images/44155149.png',
                    bookId: 4
                }, {
                    bookName: '',
                    bookCover: 'https://nwzimg.wezhan.cn/contents/sitefiles2059/10298623/images/44155149.png',
                    bookId: 5
                }, {
                    bookName: '',
                    bookCover: 'https://nwzimg.wezhan.cn/contents/sitefiles2059/10298623/images/44155149.png',
                    bookId: 6
                }, {
                    bookName: '',
                    bookCover: 'https://nwzimg.wezhan.cn/contents/sitefiles2059/10298623/images/44155149.png',
                    bookId: 7
                }, {
                    bookName: '',
                    bookCover: 'https://nwzimg.wezhan.cn/contents/sitefiles2059/10298623/images/44153601.jpg',
                    bookId: 8
                }, {
                    bookName: '',
                    bookCover: 'https://nwzimg.wezhan.cn/contents/sitefiles2059/10298623/images/44155149.png',
                    bookId: 9
                }, {
                    bookName: '',
                    bookCover: 'https://nwzimg.wezhan.cn/contents/sitefiles2059/10298623/images/44155149.png',
                    bookId: 11
                }, {
                    bookName: '',
                    bookCover: 'https://nwzimg.wezhan.cn/contents/sitefiles2059/10298623/images/44155149.png',
                    bookId: 12
                }],
                name: '新书推荐',
                total: 100
            }, {
                id: 2,
                list: [{
                    bookName: '',
                    bookCover: 'https://nwzimg.wezhan.cn/contents/sitefiles2059/10298623/images/44155149.png',
                    bookId: 2
                }, {
                    bookName: '',
                    bookCover: 'https://nwzimg.wezhan.cn/contents/sitefiles2059/10298623/images/44153601.jpg',
                    bookId: 3
                }, {
                    bookName: '',
                    bookCover: 'https://nwzimg.wezhan.cn/contents/sitefiles2059/10298623/images/44155149.png',
                    bookId: 4
                }, {
                    bookName: '',
                    bookCover: 'https://nwzimg.wezhan.cn/contents/sitefiles2059/10298623/images/44155149.png',
                    bookId: 5
                }, {
                    bookName: '',
                    bookCover: 'https://nwzimg.wezhan.cn/contents/sitefiles2059/10298623/images/44155149.png',
                    bookId: 6
                }],
                name: '新书推荐',
                total: 100
            }]
        }
    },
    methods: {
        onPaginationSizeChange(page) {
            console.log('onPaginationSizeChange', page)
        }
    }
}
</script>

<style scoped lang="scss">
.container {
    max-width: 1330px;
}

.book_collection {
    padding: 50px 0;

    .book_header {
        font-size: 30px;
        font-weight: bold;
        color: #ca000b;
        width: 100%;
        padding-bottom: 5px;
        border-bottom: 1px solid #EEE;
    }

    .book_list {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        margin-top: 50px;
        min-height: 668px;

        .book {
            margin-right: 45px;
            margin-bottom: 45px;
            width: 204px;
            height: 289px;
            overflow: hidden;
            transition: transform 0.3s;
            cursor: pointer;
            object-fit: cover;
        }

        .book:hover {
            transform: scale(1.03);
        }
    }

    .pagination {
        align-self: center;


    }
}
</style>

<style>
.el-pagination.is-background .el-pager li:not(.disabled).active {
    background: red !important;
}

.el-pagination.is-background {
    .btn-prev,
    .btn-next {
        padding: 0 10px;
    }
}
</style>